<template>
	<view>
		<view class="jobCard mL15 mR15" @click="jumpJobDetail()">
			<view class="flex  alg-center jst-between">
				<view class="jobName  txt-ellipsis font18 bold u-3 w75 txt-ellipsis">{{info?.oddJobName}}</view>
				
				<view class="jobMoney txt-ellipsis  font20 u-red">{{info?.salary}}<text class="jobUint font13">元</text>
				</view>
			</view>
			<view class="flex alg-center flex-wrap">
				<view class="jobStatus  u-red font13 mL5" v-if="info?.izUrgent==100">急聘</view>
				<view class="jobTag u-blue  font13" v-if="info?.recruitmentCarefree==1">用工无忧</view>
								
				<view class="jobTime">{{info?.jobBeginDatetime}}~{{info?.jobEndDatetime}}</view>
				<view class="jobTime">{{info?.salaryPaymentText}}</view>
				<view class="jobTime">招{{info?.oddJobUseNum}}人</view>
			</view>
			<view class="flex alg-center jst-between mT10">
				<view class="jobPos flex alg-center w70">
					<image class="posImg" :src="resources.posIcon" mode=""></image>
					<text class="posTxt mL5 txt-ellipsis">{{info?.hopeWorkAddress}}</text>
				</view>
				<view class="font13 u-6">{{info?.distance}}</view>
			</view>
			<view class="flex jst-between alg-center mT10">
				<block v-if="info?.oddReleaseType==1">
					<view class="flex alg-center">
						<u-image :width="48" :height="48" :borderRadius="10" v-if="info?.comOrUserProfile" class="companyImg" :src="xf.getImgUrl(info?.comOrUserProfile)" mode=""></u-image>
						<image v-else class="companyImg" :src="resources.defaultHeader" mode=""></image>
						<text class="companyName">{{info?.comOrUserName}}</text>
						<image v-if="info?.comizAuthentication" class="rzImg" :src="resources.qyrzLogo"
							mode=""></image>
					</view>

				</block>
				<block v-else>
					<view class="flex alg-center">
						<u-image :width="48" :height="48" :borderRadius="10" v-if="info?.comOrUserProfile" class="companyImg" :src="xf.getImgUrl(info?.comOrUserProfile)" mode=""></u-image>
						<image v-else class="companyImg" :src="resources.defaultHeader" mode=""></image>
						<text class="companyName">{{info?.comOrUserName}}</text>
						<image class="rzImg" :src="resources.grrzLogo" mode=""></image>
					</view>

				</block>

			</view>

		</view>
		<view class="pL15 pR15">
			<view class="font18 bold mB15 mT15 flex jst-between">申诉记录</view>
			<view class="pT15 pB15 pL15 pR15 radius20 bgf">
				<view class="flex jst-between mB15 u-border-bottom pB10">
					<view class="u-blue">{{info?.complaintsTypeText}}</view>
					<view class="font12" v-if="info?.complaintsType==0">已等待:
						<text  v-show="dealTime.day">{{dealTime.day}}天</text>
						<text class="pL5" v-show="dealTime.hour">{{dealTime.hour}}时</text>
						<text class="pL5" v-show="dealTime.min">{{dealTime.min}}分</text>
						<text class="pL5" v-show="dealTime.second">{{dealTime.second}}秒</text>
					</view>
				</view>
				<view class="relative pL25 flowItem">
					<image class="imgW32 flowImg" :src="resources.circleFlow" mode=""></image>
					<view class="flex jst-between font12">
						<text>申诉记录</text>
						<text class="u-8bd">{{info?.complaintsTime}}</text>
					</view>
					<view class="font15 line24 mT10">{{info?.complaintsReason}}</view>
					<view class="flex flex-wrap mT10">
						<u-image @click="xf.previewImg([xf.getImgUrl(v)])" class="mB10 mR10" :width="174" :height="174" :borderRadius="20" v-for="(v,j) in xf.getArr(info?.complaintsPicture)" :src="xf.getImgUrl(v)"></u-image>
					</view>
				</view>
				<view class="relative pL25 flowItem">
					<image class="imgW32 flowImg" :src="resources.circleFlow" mode=""></image>
					<view class="flex jst-between font12">
						<text>处理记录</text>
						<text class="u-8bd">{{info?.operatorTime}}</text>
					</view>
					<view class="mT10"> 处理人：{{info?.operator}}</view>
					<view class="font15 line24 mT10">处理结果：{{info?.operatorResult}}</view>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {myJobDetail,ssDetail} from  "@/api/userInterface/user.js"
	export default {
		data() {
			return {
				info:{},
				query:{
				  id:'',
				  latitude:'',
				  longitude:''
				},
				dealTime:{},
				timer:null
			}
		},
		 onLoad(e) {
			this.query.id=e.id;
			this.getSsDetail()
		},
		onUnload() {
			clearTimeout(this.timer); 
			clearInterval(this.timer);
			this.timer=null;
		},
		onHide() {
			clearTimeout(this.timer);  
			clearInterval(this.timer);
			this.timer=null;
		},
		methods: {
			async getSsDetail(id){
				const {lat,lon} = await this.xf.getLatOrLon();
				this.query.latitude = lat;
				this.query.longitude = lon;
				ssDetail(this.query).then(res=>{
					this.info=res.result
					if(this.info.complaintsType===0){
						let that=this;
						that.timer=setInterval(()=>{
							that.dealTime=that.xf.timeCal(that.info.complaintsTime)
						},1000)
					}
					
				})
			},
			saveMyInfo() {
				console.log(this.formData)
			}
		}
	}
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style lang="scss" scoped>
	.flowItem{
		padding-bottom: 40rpx;
		&:before{
			position: absolute;
			height: calc(100% - 55rpx);
			content: "";
			width: 3rpx;
			background: #3291F8;
			left: 8rpx;
			top: 40rpx;
		}
		.flowImg{
			position: absolute;
			left: -10rpx;
			top:-3rpx;
		}
		.pjImg{
			width: 174rpx;
			height: 174rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			// max-width:200rpx;
		}

		.jobLeft {
			width: 70%;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			margin-top: 16rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}

		.jobTag {
			height: 44rpx;
			line-height: 44rpx;
			margin-top: 16rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-right: 10rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			margin-top: 16rpx;
			padding: 0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>